<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            height: 800px;
            position: sticky;
            will-change: transform, opacity;
            top: calc(50vh + 52px - 215px - 40px);
            transform: translateY(0px) scale(1);
            opacity: 1;
        }

        .title {
            position: sticky;
            top: calc(50vh + 52px - 265px - 138px);
        }

        .card-container {
            width: 750px;
            left: 50%;
            height: 530px;
            position: absolute;
            margin: 0;
            margin-left: -375px;
            transform: translateZ(0);
        }

        .card-container .card,
        .card-container .bg {
            width: 750px;
            height: 530px;
            z-index: 2;
            position: absolute;
            border-radius: 11px;
        }

        .bg {
            background-color: #ce1c1c;
        }

        .card {
            box-shadow: 4px 12px 40px 6px rgb(0 0 0 / 9%);
            display: flex;
            justify-content: center;
            font-size: 28px;
            font-weight: 600;
        }
    </style>
</head>

<body>
    <div style="position: relative;">
        <ul class="ul">
            <li>
                <figure class="card-container" id="card1">
                    <div class="bg"></div>
                    <div class="card">内容1</div>
                </figure>
            </li>
            <li>
                <figure class="card-container" id="card2">
                    <div class="bg" style="background-color:yellow"></div>
                    <div class="card">内容2</div>
                </figure>
            </li>
            <li>
                <figure class="card-container" id="card3">
                    <div class="bg" style="background-color:yellowgreen"></div>
                    <div class="card">内容3</div>
                </figure>
            </li>
            <li>
                <figure class="card-container" id="card4">
                    <div class="bg" style="background-color:green"></div>
                    <div class="card">内容4</div>
                </figure>
            </li>
        </ul>
    </div>

</body>
<script>
    var threshold = new Array(33).fill(1).map((_, i) => i / 100 * 3);
    var opts = { threshold};
    var io = new IntersectionObserver(function ([entry]) {
        console.log(entry);
        let { target, intersectionRatio } = entry;
        let Ratio = intersectionRatio;
        let element = target.parentElement.previousElementSibling;
        if (Ratio <= 0) {
            element.style.opacity = 1;
            element.style.transform = "translateY(0) scale(1)"
        } else {
            element.style.opacity = 1 - Ratio * .5;
            element.style.transform = `translateY(-${60 * Ratio}px) scale(${1 - Ratio * 0.05})`
        }
        if (element.previousElementSibling) {
            element.previousElementSibling.style.opacity = 0.4 - Ratio;
        }
    }, opts);
    io.observe(document.querySelector("#card2"))
    io.observe(document.querySelector("#card3"))
    io.observe(document.querySelector("#card4"))
</script>

</html>